<template>
  <k-drawer v-model="show" title="添加组成员" size="50%">
    <k-form ref="form" @submit="onSubmit">
      <div class="ke__help block">
        用户加入到用户组后，将拥有该组所有权限。
      </div>

      <k-form-item label="用户组">
        <el-input :value="master" readonly></el-input>
      </k-form-item>

      <div v-loading="loading">
        <div class="auth-title">选择用户</div>
        <div class="auth-panel">
          <!-- 所有权限列表 -->
          <div class="auth-panel-list">
            <div style="height: 35px">
              <el-input v-model="search.key" placeholder="输入用户账号、名称搜索">
                <!--              <el-select slot="prepend" v-model="search.type" style="width: 100px">-->
                <!--                <el-option v-for="rule in ruleList"-->
                <!--                           :key="rule.id"-->
                <!--                           :label="rule.title"-->
                <!--                           :value="rule.id"-->
                <!--                ></el-option>-->
                <!--              </el-select>-->
              </el-input>
            </div>

            <div class="auth-panel-scroll">
              <table class="auth-panel-table">
                <thead>
                <th class="name">名称</th>
                <th class="title">备注</th>
                </thead>
                <tbody>
                <tr v-for="item in showList"
                    :key="item.id"
                    :class="{
                     selected: selectList.includes(item.id)
                   }"
                    @click="onClickSelect(item)">
                  <td>{{ item.nickname }}</td>
                  <td>{{ item.remark }}</td>
                </tr>
                </tbody>
              </table>
            </div>
          </div>

          <!-- 已选权限列表 -->
          <div class="auth-panel-my">
            <div class="auth-panel-my-title">
              <span>已选择({{ selectList.length }})</span>

              <a href="javascript:;" class="clear" @click="onClickClear">清除</a>
            </div>

            <div class="auth-panel-scroll border">
              <ul class="auth-panel-select">
                <li v-for="(uid, idx) in selectList" :key="idx"
                    class="auth-panel-select-item"
                >
                  <a href="javascript:;">{{ nameList[uid] }}</a>

                  <span class="auth-panel-select-close" @click="onClickRemove(uid)">
                    <i class="el-icon-close"></i>
                  </span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </k-form>

    <div slot="footer">
      <el-button type="primary" size="small"
                 @click="$refs.form.onSubmit()"
                 :loading="subing">确认保存</el-button>

      <el-button size="small" @click="show = false">取消</el-button>
    </div>
  </k-drawer>
</template>

<script>
import { Vue, Component, Watch } from 'vue-property-decorator'
import KDrawer from '@/components/KDrawer'
@Component ({
  components: { KDrawer },
  props: {
    value: {
      required: true,
      type: Boolean
    },
    master: {
      required: true,
      type: String
    },
    id: {
      required: true,
      type: Number
    },
    type: {
      required: true,
      type: String
    }
  }
})
export default class SafeGroupUser extends Vue {
  search = {
    key: '',
    type: 0
  }
  loading = false
  userList = []
  nameList = {}
  selectList = []
  subing = false

  get show() {
    return this.value
  }

  set show(val) {
    this.$emit('input', val)
  }

  get showList () {
    return this.userList.filter((item) => {
      if (this.search.key && (
        item.name.indexOf(this.search.key) === -1 &&
        item.title.indexOf(this.search.key) === -1
      )) {
        return false
      }
      return true
    })
  }

  @Watch('show')
  showChange(val) {
    if (val) {
      this.loading = true
      Promise.all([
        this.getList(),
        this.getMyAuth()
      ]).finally(() => {
        this.loading = false
      })
    } else {
      this.selectList = []
    }
  }

  // 获取所有用户
  getList () {
    if (this.userList.length) {
      return
    }
    return this.$http.get('admin/safe/users')
      .then(result => {
        let map = {}
        this.userList = result.list.map((item) => {
          map[item.id] = item.nickname
          return item
        })
        this.nameList = map
      })
  }

  // 获取用户组成员
  getMyAuth() {
    return this.$http.get('admin/safe/group/users', {
      id: this.id
    })
      .then(result => {
        this.selectList = result.list
      })
  }

  // 选择权限
  onClickSelect (item) {
    const idx = this.selectList.indexOf(item.id)
    if (idx === -1) {
      this.selectList.push(item.id)
    } else {
      this.selectList.splice(idx, 1)
    }
  }

  // 删除权限
  onClickRemove(rule) {
    const idx = this.selectList.indexOf(rule)
    if (idx > -1) {
      this.selectList.splice(idx, 1)
    }
  }

  // 清除权限
  onClickClear() {
    this.selectList = []
  }

  onSubmit() {
    this.subing = true
    this.$http.post('admin/safe/group/users', {
      id: this.id,
      users: this.selectList
    })
      .finally(() => this.subing = false)
      .then(result => {
        if (result.res_code === 0) {
          this.$message.success('保存成功')
          this.show = false
        } else {
          this.$message.error(result.res_msg)
        }
      })
      .catch(() => {
        this.$message.error('服务端错误')
      })
  }
}
</script>

<style scoped lang="scss">
.auth-title {
  font-size: 14px;
  color: #606266;
  line-height: 40px;
}
.auth-panel {
  font-size: 14px;
  display: flex;
  &-list {
    flex: 1;
  }
  &-my {
    width: 240px;
    margin-left: 12px;
    &-title {
      margin-bottom: 8px;
      padding: 10px 12px 10px 12px;
      height: 36px;
      .clear {
        float: right;
        color: #399EE4;
        text-decoration: none;
      }
    }
  }
  &-scroll {
    height: 300px;
    overflow: auto;
    margin-top: 10px;
    &.border {
      border: solid 1px #ebebeb;
    }
  }
  span + span {
    border-left: solid 1px #ebebeb;
  }
  &-table {
    width: 100%;
    border-collapse: collapse;
    thead {
      background: #fafafa;
      color: #555;
      th {
        text-align: left;
        font-weight: 400;
      }
    }
    th, td {
      padding: 8px 12px;
      border: solid 1px #ebebeb;
      collapse: #333;
    }
    .name {
      width: 40%;
    }
    .title {
      width: 60%;
    }
    tbody {
      tr {
        cursor: pointer;
        &.selected {
          background: #f3faff;
          color: #333;
        }
        &.disabled {
          color: #c3c5c6;
          cursor: not-allowed!important;
        }
        &:hover {
          background: #fafafa;
        }
      }
    }
  }

  &-select {
    &-close {
      display: inline-block;
      font-size: 20px;
      vertical-align: middle;
      cursor: pointer;
    }
    &-item {
      background: #ebecec;
      margin: 6px 10px;
      border-radius: 16px;
      border: solid 1px #a8a8a8;
      a {
        width: calc(100% - 30px);
        text-decoration: none;
        color: #333;
        display: inline-block;
        padding: 5px 10px;
      }
    }
  }
}
</style>
